<!DOCTYPE html>
<html>
<head>
	<title>jsBilliards</title>

	<link href="../../depends/demos.css" rel="stylesheet">
	<script src="../../depends/demos.js"></script>

	<link href="../../depends/demos.css" rel="stylesheet">
	<script src="../../depends/jquery.js"></script>
	<script src="../../depends/jquery.mousewheel.js"></script>

	<script src="../../lina.js/lina.js"></script>
	<script src="../../arcade.js/arcade.js"></script>

	<script src="jsBilliards.js"></script>

	<script type="text/javascript">
	$(function(){
		// Initialize the game
		var canvas = document.getElementById("gameCanvas");
		var game = new BilliardsGame(canvas);
		// Install handlers for the debug ccontrols on this page
		initArcadeGameDebugControls(game);
	});
	</script>
</head>
<body>
<h1>jsBillards</h1>
<div class="info">
<p>
	A JavaScript implementation of carambolage using
	<a href="http://arcade-js.googlecode.com/">arcade.js</a>
	(<a href="source.html">view the source</a> to learn more).
</p>
<p>
	Click and drag the red ball to touch both white balls.
</p>
</div>
<p align="center">
<canvas id="gameCanvas" style="width:90%; height: 480px;">This game requires HTML 5 support.</canvas>
</p>

<div class="info">
	<span id="frames">-</span> frames<br>
	<span id="points">-</span> points
</div>
<div class="debugPane">
	<input type="checkbox" id="cbDebug" value="1"><label for="cbDebug">Show debug info</label>
	<input type="checkbox" id="cbLogToCanvas" value="1"><label for="cbLogToCanvas">Log to canvas</label>
	<input type="checkbox" id="cbMaxFps" value="1"><label for="cbMaxFps">Maximum frame rate</label>
	<input type="checkbox" id="cbTimeCorrection" value="1"><label for="cbTimeCorrection">Time correction</label>
	<br>
	<input type="radio" name="rbStepmode" id="rbStepmode1" value="loop"><label for="rbStepmode1">Render loop</label>
	<input type="radio" name="rbStepmode" id="rbStepmode2" value="freeze"><label for="rbStepmode2">Freeze</label>
	<input type="radio" name="rbStepmode" id="rbStepmode3" value="stop"><label for="rbStepmode3">Stop</label>
	<button id="btnStep">Single step</button>
</div>
</body>
</html>
